ABSTRACT
The danger of spreading the new variant of Coronavirus Disease (COVID-19) still exists. It takes a new habit to prevent it. The World Health Organization (WHO)urges to minimize the spread of the COVID-19 variant, including by getting used to washing hands regularly. To support this call, the researchers carried out various innovations. One of them is through the application of Internet of Things (IoT) technology for routine hand washing. This research innovates by using an IoT tool that we named Amikom Purwokerto Hand Sanitizer (AMPUH). In addition to functioning as an automatic hand-washing device, this tool is also capable of recording temperature data, and the number of users, controlling hand sanitizer liquid and measuring saturation automatically. The recordings are stored through a data logger and processed through an IoT platform called ThingSpeak. ThingSpeak has the disadvantage of data visualization which is less attractive and informative. A website dashboard is needed to visualize the data contained on the ThingSpeak platform so that the display is more attractive and easier to understand. Therefore, this study aims to create a website dashboard that can provide information from the data stored on the ThingSpeak platform. The author focuses on the front-end by using the Vue.js framework. This framework has advantages such as being flexible (can be used in large-and small-scale websites), reducing repetitive code, and making the page display more dynamic. In building this front end, we apply the Extreme Programming development method. Based on the results of the study, showed that the implementation of the Vue.js framework on the AMPUH data logger front-end resulted in performance in accordance with expectations. Websites that are built to produce attractive and informative visualizations. © 2022 IEEE.